import React, { useEffect } from 'react';
import { Text, View } from '@tarojs/components';
import PageContainer from '@/components/PageContainer';
import { getRechargePackageList } from '@/services/payment';
import FlexScrollView from '@/components/FlexScrollView';
import DeviceItem from '../home/deviceList/deviceItem';
import { useDeviceListStore } from '@/hooks';
import './index.less';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import Taro from '@tarojs/taro';


const dstyle = GStyleSheet.create({
    list: {
      paddingLeft: 20,
      paddingRight: 20,
    },
    recordText: {
      fontSize: 13,
      color: DynamicColors.normalTextGaryColor,
    },
    title: {
      paddingTop: 10,
      paddingLeft: 20,
      paddingRight: 20,
      fontSize: 16,
      color: DynamicColors.normalTextColor,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    bottom: {
      marginTop: 20,
      marginBottom: 20,
    },
  });

const PaymentPage: React.FC = () => {
  const { data } = useDeviceListStore();
  const styles = dstyle.useDynamicStyle();
  return (
    <PageContainer title="充值管理">
        
        <FlexScrollView id='deleteScrollList' scrollStyle={styles.list}>
          {data.map((device) => {
            return <DeviceItem showQuotaDetail key={device.did} device={device} onClick={() => { 
              Taro.navigateTo({
                url: `/pages/payment/packages?id=${device.id}`,
              })
            }} renderRight={null} />
          })}
            <View style={{ height: 20 }} />
        </FlexScrollView>
    </PageContainer>
  );
};

export default PaymentPage;